<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Front小思</title>
		<link href="//fonts.googleapis.com/css?family=Nunito:400,600,700,800,900&display=swap" rel="stylesheet">
		<link href="//fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="assets/css/style-starter.css">
		<link rel="shortcut icon" href="easyicon.ico"/>
		<link rel="stylesheet" type="text/css" href="assets/fonts/iconfont.css">
	</head>
	<body>
		<!-- 导航栏 -->
		<script>
			function showImgePhone(){
				document.getElementById("ImgePhone").style.display="block";
			};
			function hideImgePhone(){
				document.getElementById("ImgePhone").style.display="none";
			};
		</script>
		<section class="w3l-bootstrap-header">
			<nav class="navbar navbar-expand-lg navbar-light py-lg-3 py-2">
				<div class="container">
					<a class="navbar-brand" href="index.html" style="cursor: pointer;position: relative;" onmouseover="showImgePhone()" onmouseout="hideImgePhone()"> Front小思◆站点 </a>
					<img id="ImgePhone" style="border-radius:5px; display: none; position: absolute;margin: 160px 0 0 265px;" src="assets/images/look-for-phone.png" />		  
	                <!-- <a class="navbar-brand" href="#index.html">
	                    <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
	                </a> -->
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
					 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon fa fa-bars"></span></button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item">
								<a class="nav-link" href="index.html">首页</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="about.html">关于</a>
							</li>
							<!-- <li class="nav-item">
								<a class="nav-link" href="services.html">服务</a>
							</li> -->
							<li class="nav-item">
								<a class="nav-link" href="contact.html">联系</a>
							</li>
						</ul></div>
				</div>
			</nav>
		</section>

        <!-- 主页 -->
		<section class="w3l-main-banner" id="home">
			<div class="companies20-content">
				<div class="companies-wrapper">
					<div class="item">
						<div class="slider-info banner-view text-center">
							<div class="banner-info container">
								<img src="assets/images/aa.jpg" alt="欢迎来到Front小思的主页" class="img-fluid" title="欢迎来到Front小思的主页">
								<h3 class="banner-text mt-5">Front小思</h3>
								<p class="my-4 mb-5">黄思聂◆前端工程师(2年)</p><br>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
        
        <!-- 欢迎来到我的站点 -->
		<section class="w3l-about ">
			<div class="skills-bars py-5">
				<div class="container py-md-3">
					<div class="heading text-center mx-auto">
						<h3 class="head">欢迎来到我的站点</h3>
						<p class="my-3 head"> "只有向自己提出伟大理想,并以自己全部的力量为之奋斗的人,才是最幸福的。"
						本人从事前端开发工作已有两年的开发经验，参与多个小程序、APP开发，对模块化前端开发较为深入理解，为人谦虚谨慎，自学能力强，对工作积极面对。</p>
					</div>
					<!-- <div class="row mt-5 pt-3">
						<div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
							<h4>HTML/CSS/JAVASCRIPT</h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 50% ;height:4px;"
								 aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
								</div>
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
							<h4>VUE/UNIAPP</h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 80% ;height:4px;"
								 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
								</div>
							</div>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
							<h4>REACT</h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 60% ;height:4px;"
								 aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
								</div>
							</div>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
							<h4>小程序</h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 70% ;height:4px;"
								 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
								</div>
							</div>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-6 skills-bar-grids mb-4 pb-2">
							<h4>网络基础</h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 90% ;height:4px;"
								 aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
								</div>
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-6 skills-bar-grids ">
							<h4>SEO</h4>
							<div class="progress">
								<div class="progress-bar progress-bar-striped bg-color" role="progressbar" style="width: 80% ;height:4px;"
								 aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
								</div>
							</div>
						</div>
					</div> -->
				</div>
			</div>
		</section>

        <!-- 自我价值推荐 -->
		<section class="w3l-feature-3" id="features">
			<div class="grid top-bottom">
				<div class="container">
					<div class="heading text-center mx-auto">
						<h3 class="head text-white">自我价值推荐</h3>
						<p class="my-3 head text-white"> 在不断的学习和工作中养成的严谨、踏实的工作作风和团结协作的优秀品质，
						使我深信自己完全可以在岗位上守业、敬业、更能创业！
						我相信我的能力和知识正是贵单位所需要的，我真诚渴望，
						我能为单位的明天奉献自己的青春和热血！</p>
					</div>
					<div class="middle-section grid-column text-center mt-5 pt-3">
						<div class="three-grids-columns">
							<span class="fa fa-paint-brush"></span>
							<h4>基础知识</h4>
							<p>熟练CSS/JavaScript/Node等基础知识以及ES6的新特性；
							   熟悉HTTP协议以及相关的网络原理；
						       有良好的数据结构基础，能快速运用相关技术完成项目开发；
                               熟练PhotoShop、VScode、HBuildeX、微信开发工具等工具的使用以及编译调试！
						   </p>
						</div>
						<div class="three-grids-columns">
							<span class="fa fa-ils"></span>
							<h4>框架开发</h4>
							<p>
							   熟悉微信小程序原生开发以及小程序云开发；
							   擅长使用VUE、UNIAPPP技术栈以及其生态圈，能快速运用相关技术完成项目的模块化开发：
							   熟悉React的基本使用，开发过阿里巴巴国际站后台模块拖拉设计；
						       熟悉WEB响应式开发适配不同的设备！
						       </p>
						</div>
						<div class="three-grids-columns">
							<span class="fa fa-camera"></span>
							<h4>性能优化</h4>
							<p>
                               熟悉CDN、按需加载、懒加载等项目的优化策略；
							   后期持续优化前端体验和页面的响应速度，并保证兼容性和执行效率；
							   熟悉webpack、babel等打包工具；
						       熟练使用Git、SourceTree等代码管理工具！</p>
						</div>
					</div>
				</div>
			</div>
		</section>

        <!-- 项目作品展示 -->
		<div class="products-4" id="portfolio">
			<div id="products4-block" class="text-center">
				<div class="container">
					<div class="heading text-center mx-auto mb-5">
						<h3 class="head">项目作品展示</h3>
						<p class="my-3 head"> 在不断的学习和工作中养成的严谨、踏实的工作作风和团结协作的优秀品质，
						使我深信自己完全可以在岗位上守业、敬业、更能创业！</p>
					</div>
					<input id="tab1" type="radio" name="tabs" checked>
					<label class="tabtle" for="tab1">个人博客</label>
					<input id="tab2" type="radio" name="tabs">
					<label class="tabtle" for="tab2">企业官网</label>
					<input id="tab3" type="radio" name="tabs">
					<label class="tabtle" for="tab3">微信小程序</label>
					<input id="tab4" type="radio" name="tabs">
					<label class="tabtle" for="tab4">UNIAPP/VUE</label>
					<!-- 个人博客对应的效果图 -->
					<section id="content1" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
								<a href="assets/images/myblog/myblog1.png" data-lightbox="example-set" data-title="首页的相关布局效果，包括博客的底部导航栏等功能！">
									<figure>
										<img src="assets/images/myblog/myblog1.png" class="img-responsive" alt="底部导航栏" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/myblog/myblog2.png" data-lightbox="example-set" data-title="首页的相关布局效果，包括博客的顶部搜索、导航栏、文章排版等功能！">
									<figure>
										<img src="assets/images/myblog/myblog2.png" class="img-responsive" alt="顶部搜索" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/myblog/myblog3.png" data-lightbox="example-set" data-title="专题的相关布局效果，包括博客的专题的分类等功能！">
									<figure>
										<img src="assets/images/myblog/myblog3.png" class="img-responsive" alt="专题分类" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/myblog/myblog4.png" data-lightbox="example-set" data-title="个人中心的相关布局效果，包括博客头像、中心分类等功能！">
									<figure>
										<img src="assets/images/myblog/myblog4.png" class="img-responsive" alt="个人中心" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/myblog/myblog5.png" data-lightbox="example-set" data-title="后台管理的相关布局效果，包括文章、评论、专题、标签等功能！">
									<figure>
										<img src="assets/images/myblog/myblog5.png" class="img-responsive" alt="后台管理" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/myblog/myblog6.png" data-lightbox="example-set" data-title="公众号的相关文章效果等功能！">
									<figure>
										<img src="assets/images/myblog/myblog6.png" class="img-responsive" alt="公众号的相关文章" />
									</figure>
								</a>
							</div>
						</div>
					</section>
					<!-- 企业官网对应的效果图 -->
					<section id="content2" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
								<a href="assets/images/shencaihong/深彩虹1.jpg" data-lightbox="example-set" data-title="首页的相关布局效果，包括企业导航栏、轮播图、在线咨询等功能！">
									<figure>
										<img src="assets/images/shencaihong/深彩虹1.jpg" class="img-responsive" alt="首页导航栏" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/shencaihong/深彩虹2.jpg" data-lightbox="example-set" data-title="首页的相关布局效果，包括企业产品中心、关于我们等功能！">
									<figure>
										<img src="assets/images/shencaihong/深彩虹2.jpg" class="img-responsive" alt="首页产品中心" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/shencaihong/深彩虹3.jpg" data-lightbox="example-set" data-title="首页的相关布局效果，包括企业企业商讯、联系我们、脚页等功能！">
									<figure>
										<img src="assets/images/shencaihong/深彩虹3.jpg" class="img-responsive" alt="首页企业商讯" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/shencaihong/深彩虹4.jpg" data-lightbox="example-set" data-title="产品也的相关布局效果，包括企业介绍、产品展示等功能！">
									<figure>
										<img src="assets/images/shencaihong/深彩虹4.jpg" class="img-responsive" alt="产品展示" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/shencaihong/深彩虹5.png" data-lightbox="example-set" data-title="联系我们的相关布局效果，包括企业联系方式等功能！">
									<figure>
										<img src="assets/images/shencaihong/深彩虹5.png" class="img-responsive" alt="联系我们" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/shencaihong/深彩虹6.png" data-lightbox="example-set" data-title="联系的相关布局效果，包括企业联系方式、新闻媒体等功能！">
									<figure>
										<img src="assets/images/shencaihong/深彩虹6.png" class="img-responsive" alt="联系我们" />
									</figure>
								</a>
							</div>
						</div>
					</section>
                    <!-- 微信小程序对应的效果图 -->
					<section id="content3" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
								<a href="assets/images/xiaocx/xiaocx1.jpg" data-lightbox="example-set" data-title="首页的相关布局效果，包括小程序的分类等功能！">
									<figure>
										<img src="assets/images/xiaocx/xiaocx1.jpg" class="img-responsive" alt="小程序的分类" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/xiaocx/xiaocx2.jpg" data-lightbox="example-set" data-title="小程序的分类等功能！">
									<figure>
										<img src="assets/images/xiaocx/xiaocx2.jpg" class="img-responsive" alt="小程序的分类" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/xiaocx/xiaocx3.jpg" data-lightbox="example-set" data-title="小程序的钱包等功能！">
									<figure>
										<img src="assets/images/xiaocx/xiaocx3.jpg" class="img-responsive" alt="小程序的钱包" />
									</figure>
								</a>
							</div>
						</div>
					</section>
                    <!-- UNIAPP/VUE对应的效果图 -->
					<section id="content4" class="tab-content text-left">
						<div class="d-grid grid-col-3">
							<div class="product">
								<a href="assets/images/uniapp/uniapp1.jpg" data-lightbox="example-set" data-title="APP首页轮播图、分类等效果！">
									<figure>
										<img src="assets/images/uniapp/uniapp1.jpg" class="img-responsive" alt="APP首页轮播图" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/uniapp/uniapp3.jpg" data-lightbox="example-set" data-title="APP会员等效果！">
									<figure>
										<img src="assets/images/uniapp/uniapp3.jpg" class="img-responsive" alt="APP会员" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/uniapp/uniapp4.jpg" data-lightbox="example-set" data-title="APP个人中心等效果！">
									<figure>
										<img src="assets/images/uniapp/uniapp4.jpg" class="img-responsive" alt="APP个人中心" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/vue/vue1.jpg" data-lightbox="example-set" data-title="一鸣惊人的后台管理系统">
									<figure>
										<img src="assets/images/vue/vue1.jpg" class="img-responsive" alt="一鸣惊人的后台管理系统" />
									</figure>
								</a>
							</div>
							<div class="product">
								<a href="assets/images/vue/vue2.png" data-lightbox="example-set" data-title="深彩虹的后台管理系统">
									<figure>
										<img src="assets/images/vue/vue2.png" class="img-responsive" alt="深彩虹的后台管理系统" />
									</figure>
								</a>
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>

		<script src="assets/js/jquery-3.3.1.min.js"></script>
		<script src="assets/js/lightbox-plus-jquery.min.js"></script>
		<script type="text/javascript">
			function showImge(){
				document.getElementById("blogImge").style.display="block";
			};
			function hideImge(){
				document.getElementById("blogImge").style.display="none";
			};
			function showImge1(){
				document.getElementById("blogImge1").style.display="block";
			};
			function hideImge1(){
				document.getElementById("blogImge1").style.display="none";
			};
			function showImge2(){
				document.getElementById("blogImge2").style.display="block";
			};
			function hideImge2(){
				document.getElementById("blogImge2").style.display="none";
			}
		</script>
		<!-- 项目介绍 -->
		<section class="services-12" id="experience">
			<div class="form-12-content">
				<div class="container">
					<div class="heading text-center mx-auto mb-5">
						<h3 class="head">项目介绍</h3>
						<p class="my-3 head"> 在不断的学习和工作中养成的严谨、踏实的工作作风和团结协作的优秀品质，
						使我深信自己完全可以在岗位上守业、敬业、更能创业！</p>
					</div>
					<div class="grid grid-column-1">
						<div class="column1">
							<div>
								<h3 class="mb-5" style="cursor: pointer;position: relative; font-size: 29px;" onmouseover="showImge()" onmouseout="hideImge()">个人博客小程序(扫码)</h3>	
							    <img id="blogImge" style="border-radius:5px; display: none; position: absolute;margin: -42px 0 0 278px;" src="assets/images/myBlogImage.jpg" />	
							</div>		
							<div class="experience-top">
								<h5>2020.11至今</h5>
								<h4>项目描述</h4>
								<p class="my-3 text-white">个人博客小程序是基于云开发环境实现的，该小程序完全不依赖任何后端系统服务，
						无需自己的网站、服务器、域名等资源，直接操作云数据库、云存储，调用云函数定时刷新实现文章与微信公众号图文信息的同步，
						并且配置了相关的后台管理功能，实现文章、专题、标签等管理！</p>
							    <h4>项目职责</h4>
								<p class="my-3 text-white">项目初期，全面负责技术调研与需求的收集、使用PhotoShop实现项目的初稿设计、
						XMind实现项目的需求分析图设计、微信开发工具实现云环境的基础搭建以及Flex布局实现对应的UI和逻辑。负责封装项目API接口模块、
					    config配置等模块的开发，推进了项目的有序进行！</p>
							    <h4>项目难点</h4>
								<p class="my-3 text-white">该项目主要使用了小程序云开发的技术栈，配合云环境搭建项目的骨架，在开发过程中，
						一开始用的异步方法基本是回调方法，之前功能简单还好，Json数据多时，回调方法太多感觉有点眼花，本来打算用ES7的async/await,
						但目前微信开发工具不支持，为了小程序性能问题，所以还是用Promise使代码可读性提高了很多，比如专题使用了Promise.all，
						不过现在可以引用regeneratorRuntime.js库来解决这个问题。另外，在实现海报分享功能时遇到canvas调用wx.canvasToTempFilePath
						生成海报时乱码，后来研究GitHub的wxa-plugin-canvas插件可以生成精美的海报，生成海报后保存到云数据库中，
					    减少下次生成海报浪费后台流量！</p>
								<h4>取得成果</h4>
								<p class="my-3 text-white">量化、减少人工写代码的成本，less code or no code,从而提升整体开发效率的30%-50%，
						代码量减少70%，同时组件的测试覆盖率完成度80%！准备把改小程序搬迁到uniapp框架中实现多端效果，敬请期待！！！</p>
							</div>
						</div>
            
                        <div class="column1">
                        	<div>
                        		<a href="http://ncwb.cnncw.cn/shtml/home/c50067586/" style="cursor: pointer;position: relative;" onmouseover="showImge1()" onmouseout="hideImge1()">
                        			<h3 class="mb-5" style="font-size: 29px;">深彩虹(浏览)</h3>
                        		</a>	
							    <img id="blogImge1" style="border-radius:5px; display: none; position: absolute;margin: -42px 0 0 160px;" src="assets/images/shencaihong.png" />	
							</div>
							<div class="experience-top">
								<h5>2021.2-2021.3</h5>
								<h4>项目描述</h4>
								<p class="my-3 text-white">深彩虹企业官网属于Web端，主要包括首页、关于国彩、产品中心、工程案例、新闻中心、
						招商联盟、联系国彩7大模块！</p>
						        <h4>项目职责</h4>
								<p class="my-3 text-white">项目初期，全面负责技术调研与需求的收集；按照遵循逐渐增强，优雅降级原则使用PhotoShop切图高度还原设计稿；使用thymeleaf自然引擎模板搭建项目，实现对应的模块效果；对接后台管理系统完成数据的交互，同时为部分后台渲染首页提供模板对主流浏
						览器进行兼容和通过媒体查询做屏幕适配，实现响应式布局！</p>
							    <h4>项目难点</h4>
								<p class="my-3 text-white">该项目主要使用了H5/CSS3/JS+jQuery的技术栈，配合thymeleaf自然引擎模板搭建项目的骨架，在开发过程中，
						遇到获取项目根目录时失效，最终了解到自定义的javascript中使用thymeleaf表达式时需要将script声明一下：th:inline="javascript"来解决这问题。
						另外，还遇到IE8以下的浏览器中无法实现效果的兼容行问题，最终针对IE8以下的兼容性，引用了respond.min.js插件判断了是窄屏幕，则会加载调整的样式。
                        上线后，得到运营同事的以及用户的一至好评！</p>			   
								<h4>取得成果</h4>
								<p class="my-3 text-white">使用thymeleaf自然引擎模板将美工与程序员相结合，美工可以在浏览器查看静态效果，程序员可以在应用服务器
						查看带数据效果；兼容IE8以下浏览器的兼容问题！</p>
							</div>
                        </div>
            
                        <div class="column1">
                        	<div>
                        		<a href="https://www.androidgamesroom.com/app/181903.htm" style="cursor: pointer;position: relative;font-size: 30px;" onmouseover="showImge2()" onmouseout="hideImge2()">
                        			<h3 class="mb-5" style="font-size:29px;">智客叮当App(下载)</h3>
                        		</a>	
							    <img id="blogImge2" style="border-radius:5px; display: none; position: absolute;margin: -42px 0 0 250px;" src="assets/images/zhikedingdang.png" />	
							</div>
							<div class="experience-top">
								<h5>2021.01-2021.03</h5>
								<h4>项目描述</h4>
								<p class="my-3 text-white">智客叮当属于APP端,编译有Android端和IOS端,该APP前端是基于uniapp技术栈,配合vue+elememt UI 技术栈实现的,
						实现了海内外跨平台快捷的线上购物服务平台!</p>
						        <h4>项目职责</h4>
								<p class="my-3 text-white">项目初期，与前端伙伴全面负责技术调研与需求的收集，充分了解项目需求。基于UniApp应用前端框架使用PhotoShop
						切图高度还原设计稿，前期使用mock数据模拟前端界面效果与功能，实现对应的UI视觉效果。参与该APP的基础模板的搭建与改造（主要是从微信小程序哪里搬迁过来的），
						整理通用工具类库；中期主要是调取后台的.do动态数据接口进行界面的渲染，实现产品UI和交互方面的开发需求；后期确保产品具有优质的用户使用体验，
					    产品上线后按需求继续跟进优化！</p>
							    <h4>项目难点</h4>
								<p class="my-3 text-white">该项目主要使用了uniapp的技术栈，配合nvue架搭建项目的骨架，在开发过程中，遇到自定义导航栏手机顶部状态栏被页面覆盖。
						最终改变status-bar-height的CSS变量，封装一个标准的状态栏高度组件放view的顶端，适配Android和IOS，要用px解决问题；
						另外遇到关闭bounce避免IOS端下拉冲突, 由于touchmove事件的缺陷（小程序遇到，如20跳40），下拉感觉会掉帧，最终Transition设置0.1秒延迟，让CSS来处理这段空窗期，使用cubic-bezier修改曲线调整回弹效果。
						还遇到长列表渲染的性能问题（主要是：解析问题），最终我决定采用mescroll.js库来解决这个问题。上线后，得到运营同事的以及用户的一至好评！</p>			   
								<h4>取得成果</h4>
								<p class="my-3 text-white">解决了原生导航栏被覆盖和刷新掉帧的问题，适配了两端；减少了页面渲染大型长列表数据的卡顿情况；
						量化、减少人工写代码的成本，因为公司存在大量的中后台系统，且相似度极高。开始着手封装针对公司级别的业务组件，实现了通过配置JSON渲染界面，也能让后端同时快速
						上手前端开发，从而提升整体开发效率的30%-50%，代码量减少70%，同时组件的测试覆盖率完成度80%！</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

        <!-- 向大佬学习 -->
		<section class="w3l-testimonials" id="testimonials">
			<div class="customers-6-content py-5">
				<div class="container py-lg-3">
					<div class="heading text-center mx-auto">
						<h3 class="head">向大佬学习</h3>
						<p class="my-3 head "> 在不断的学习和工作中养成的严谨、踏实的工作作风和团结协作的优秀品质，
              使我深信自己完全可以在岗位上守业、敬业、更能创业！</p>
					</div>
					<div id="customerhnyCarousel" class="carousel slide" data-ride="carousel">
						<ol class="carousel-indicators">
							<li data-target="#customerhnyCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#customerhnyCarousel" data-slide-to="1"></li>
						</ol>
						<div class="carousel-inner pb-5">
							<div class="carousel-item active">
								<div class="customer row py-5 mt-3">
									<div class="col-lg-4 col-md-6">
										<div class="card">
											<div class="card-body">
												<img class="card-img-top img-responsive" src="assets/images/dalao/dalao1.jpg" alt="Ruan Yifeng" title="Ruan Yifeng">
												<h3 class="card-title mt-2">Ruan Yifeng</h3>
												<p class="sub-title mb-3">软件工程师</p>
												<p class="card-text"> "阮一峰,上海财经大学世界经济博士研究生。主要研究宏观金融、货币政策与美国经济。他本人也是一名IT技术人员，
						                        并且对自由软件有着坚定不移的信念。记得很多东西都是从他博客学到的，例如Flex布局、ES6等！"
												</p>
											</div>
										</div>
									</div>
									<div class="col-lg-4 col-md-6 off-testi-2">
										<div class="card">
											<div class="card-body">
												<img class="card-img-top img-responsive" src="assets/images/dalao/dalao2.jpg" alt="winter" title="winter" />
												<h3 class="card-title mt-2">winter</h3>
												<p class="sub-title mb-3">前端工程师</p>
												<p class="card-text"> "网名winter，毕业于哈尔滨工程大学计算机学。 2012年-2018年入职阿里巴巴，是前手机淘宝前端leader，淘宝终端架构组leader，JavaScript 专家。程劭非带领团队开发了阿里巴巴手机淘宝和淘宝基础架构设施。"
												</p>
											</div>
										</div>
									</div>
									<div class="col-lg-4 offset-md-3 offset-lg-0 col-md-6 off-testi">
										<div class="card">
											<div class="card-body">
												<img class="card-img-top img-responsive" src="assets/images/c3.jpg" alt="David Marr" title="David Marr" />
												<h3 class="card-title mt-2">David Marr</h3>
												<p class="sub-title mb-3">视觉工程师</p>
												<p class="card-text"> "20 世纪 70 年代，身为神经系统学家的 Marr，将神经心理学与人工智能的知识相结合，提出了具有跨时代意义的「计算视觉理论」，标志着计算机视觉成为一门独立学科,对推进计算机发展有一定的贡献！"
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="carousel-item">
								<div class="customer row py-5 mt-3">
									<div class="col-lg-4 col-md-6">
										<div class="card">
											<div class="card-body">
												<img class="card-img-top img-responsive" src="assets/images/dalao/dalao2.jpg" alt="winter" title="winter" />
												<h3 class="card-title mt-2">winter</h3>
												<p class="sub-title mb-3">前端工程师</p>
												<p class="card-text"> "网名winter，毕业于哈尔滨工程大学计算机学。 2012年-2018年入职阿里巴巴，是前手机淘宝前端leader，淘宝终端架构组leader，JavaScript 专家。程劭非带领团队开发了阿里巴巴手机淘宝和淘宝基础架构设施。"
												</p>
											</div>
										</div>
									</div>
									<div class="col-lg-4 col-md-6 off-testi-2">
										<div class="card">
											<div class="card-body">
												<img class="card-img-top img-responsive" src="assets/images/dalao/dalao1.jpg" alt="Ruan Yifeng" title="Ruan Yifeng" />
												<h3 class="card-title mt-2">Ruan Yifeng</h3>
												<p class="sub-title mb-3">软件工程师</p>
												<p class="card-text"> "阮一峰,上海财经大学世界经济博士研究生。主要研究宏观金融、货币政策与美国经济。他本人也是一名IT技术人员，
						                        并且对自由软件有着坚定不移的信念。记得很多东西都是从他博客学到的，例如Flex布局、ES6等！"
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
            </div>
		</section>

        <!-- 页脚 -->
		<section class="w3l-footer-29-main" id="footer">
			<div class="footer-29 text-center">
				<div class="container">
					<div class="main-social-footer-29">
						<a href="#facebook" class="facebook"><span class="fa fa-facebook"></span></a>
						<a href="#twitter" class="twitter"><span class="fa fa-twitter"></span></a>
						<a href="#instagram" class="instagram"><span class="fa fa-instagram"></span></a>
						<a href="#google-plus" class="google-plus"><span class="fa fa-google-plus"></span></a>
						<a href="#linkedin" class="linkedin"><span class="fa fa-linkedin"></span></a>
					</div>
					<div class="bottom-copies text-center">
						<p class="copy-footer-29">© 2020 我的网站。| 设计版权所有 <a href="#">Front小思</a></p>
					</div>
				</div>
			</div>
			<!-- 回到顶部-->
			<button onclick="topFunction()" id="movetop" title="回到顶部">
				<span class="fa fa-angle-up"></span>
			</button>
			<script>
				window.onscroll = function() {
					scrollFunction()
				};

				function scrollFunction() {
					if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
						document.getElementById("movetop").style.display = "block";
					} else {
						document.getElementById("movetop").style.display = "none";
					}
				}

				function topFunction() {
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}
			</script>
		</section>

		<!-- 联系我 -->
		<script src="assets/js/xuanfu-lianxi.js"></script>
		<div class="suspension">
			<div class="suspension-box">
				<a href="javascript:;" class="a a-service "><i class="i"></i></a>
				<a href="javascript:;" class="a a-service-phone "><i class="i"></i></a>
				<a href="javascript:;" class="a a-qrcode"><i class="i"></i></a>
        <div class="d d-service-phone">
					<i class="arrow"></i>
					<div class="inner-box">
						<div class="d-service-item clearfix">
							<span class="circle"><i class="i-tel"></i></span>
							<div class="text">
								<p>服务热线</p>
								<p class="red number">136-4000-5651</p>
							</div>
						</div>
					</div>
        </div>
				<div class="d d-service">
					<i class="arrow"></i>
					<div class="inner-box">
						<div class="d-service-item clearfix">
							<a href="#" class="clearfix"><span class="circle"><i class="i-qq"></i></span><h3>QQ在线联系我(3098873668)</h3></a>
						</div>
					</div>
        </div>
				<div class="d d-qrcode">
					<i class="arrow"></i>
					<div class="inner-box">
						<div class="qrcode-img"><img src="./assets/images/shejiao/about-main-weixin.jpg" alt=""></div>
						<p>扫码加我微信</p>
					</div>
				</div>
			</div>
		</div>
	
		<script src="assets/js/jquery-3.3.1.min.js"></script>
		<script>
			$(function() {
				$('.navbar-toggler').click(function() {
					$('body').toggleClass('noscroll');
				})
			});
		</script>
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
		 crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
		 crossorigin="anonymous"></script>
	</body>
</html>
